/**
 * iframe: true
 * compact: true
 */
import { Card } from 'antd';
import { ConfigProvider, Steps } from 'xwd-ant';

const items = [
  {
    title: '已完成',
    description: '这是第一步的描述',
  },
  {
    title: '进行中',
    description: '这是第二步的描述',
  },
  {
    title: '等待中',
    description: '这是第三步的描述',
  },
  {
    title: '等待中',
    description: '这是第四步的描述',
  },
];
export default () => {
  return (
    <>
      <Card title="垂直标题步骤条">
        <ConfigProvider>
          <Steps current={1} items={items} verticalAlign={true} />
          <Steps
            current={1}
            items={items}
            showWaitDot={true}
            verticalAlign={true}
            status="error"
          />
          <Steps
            current={1}
            items={items}
            showProcessEllipsis={true}
            showWaitDot={true}
            verticalAlign={true}
          />
          <Steps
            style={{ marginTop: '100px' }}
            current={1}
            items={items}
            showProcessEllipsis={true}
            processIconSize={true}
            showWaitDot={true}
            verticalAlign={true}
          />
        </ConfigProvider>
      </Card>
    </>
  );
};
